import { Space, Input, Button, Image, message } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios'
// import { addBanner } from '../../api/banner';

// 端口号
 interface IBannerParams {
  id:string,
  bannerPic: string
  }


type AddGLProps = {}

export const AddGL = (props: AddGLProps) => {

const baseURL = 'http://localhost:12580/bannerGrocery'

const addBanner = async () => {
  let indexId
  axios({
    url: baseURL,
    method: 'get'
  }).then((res) => {
    indexId = res.data.length + 1
    console.log(indexId)
  })
  await axios({
    url: baseURL,
    method: 'post',
    data: {
      id: indexId,
      bannerPic: url
    }
  }).then(res => {
    console.log(res.data)
  })

}

// const [id, setId] = useState<string>('')
const [url, setUrl] = useState('')

const getImgUrl = () => {
 const img = document.getElementById('img') as HTMLInputElement
 const files = img && img.files
 const file = files && files[0]
 const reader = new FileReader()
 reader.readAsDataURL(file!)
 reader.onload = function () {
   setUrl(this.result!.toString())
 }
}
const navigate = useNavigate()
return (
 <Space direction='vertical' style={{ width: '100%' }}>
   {/* <Input placeholder='id信息' value={ id } onChange = { e=> setId(e.target.value) }/> */}
   <Input type="file" id='img' onChange={ getImgUrl }/>
   <div>
     预览图片:
     <Image src={ url } width = { 300 } />
   </div>
   <Button type='primary'
   onClick={()=>{
    if(url === ''){
      message.error('请先完成表单输入')
      return
    }
    addBanner().then(() => {
      navigate('/banner/gblist')
    })
   }}
   >添加</Button>
 </Space>
);
}